<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: sun
 * @Date: 2022-03-14 23:12:24
-->
<template>
  <div class="home-container container">
    <img src="@/assets/imgs/pic/6.png" class="article-pic" />
    <p
      class="hot"
      @click="jump(item.type, item)"
      v-for="(item, index) in data"
      :key="index"
    ></p>
    <aside v-if="current && current.type != 3">
      <section class="box">
        <span class="text" v-if="current.text">{{ current.text }}</span>
        <img :src="current.img" class="wx-img" v-if="current.img" />
        <span class="closeBtn" @click="closeFn()"></span>
      </section>
    </aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: null,
      data: [
        { type: 3, url: 'https://shop.m.jd.com/?shopId=38797' },
        {
          type: 3,
          url: 'http://tg.zazhipu.com/index.php?s=/index/computer.html',
        },
        {
          type: 3,
          url:
            'https://pro.m.jd.com/mall/active/aR867ENZvvSbPs6pu1dr8VGp9ik/index.html?PTAG=17053.1.1&utm_source=weixin&utm_medium=weixin&utm_campaign=t_1000072672_17053_001',
        },
      ],
    };
  },
  methods: {},
  mounted() {},
  methods: {
    jump(type, item) {
      this.current = item;
      if (type != 3) {
        return;
      }
      location.href = item.url;
    },
    closeFn() {
      this.current = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin-bottom: 100px;
  position: relative;
  p.hot {
    width: 90%;
    left: 5%;
    height: 5.5rem;
    position: absolute;
    z-index: 1;
    top: 10rem;
    &:nth-child(3) {
      top: 16.2rem;
    }
    &:nth-child(4) {
      top: 23.5rem;
    }
  }
}
</style>
